<template>
  <div class="login">
    <div class="first">
      <img src="../assets/logo2.png" />
    </div>
    <div class="second">
      <div class="secondBox">
        <van-tabs>
          <van-tab title="账号登录">
            <van-form @submit="loginAccout">
              <van-field
                v-model="phonenum"
                name="account"
                label="手机号码"
                placeholder="请输入手机号码"
                :rules="[
                  {
                    pattern: /^1[345678]\d{9}$/,
                  },
                ]"
              />
              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                right-icon="question-o"
                @click-right-icon="findPassword"
                :rules="[{ required: true }]"
              />
              <div style="margin: 0.4rem 1rem 0rem">
                <van-button round block type="info" native-type="submit"
                  >登录</van-button
                >
              </div>
            </van-form>
          </van-tab>
          <van-tab title="快速登录">
            <van-form @submit="loginByCaptcha">
              <van-field
                v-model="loginphone"
                name="phone"
                label="手机号码"
                placeholder="请输入手机号码"
                :rules="[
                  {
                    pattern: /^1[345678]\d{9}$/,
                  },
                ]"
              />
              <van-field
                v-model="captcha"
                name="captcha"
                label="验证码"
                placeholder="验证码"
                :rules="[{ required: true }]"
              >
                <template #button>
                  <van-button
                    :disabled="countTime < 60 && countTime >= 0"
                    @click="sendCaptcha(login)"
                    size="small"
                    type="primary"
                    >{{
                      countTime != 60 ? `${countTime}秒之后发送` : "发送验证码"
                    }}</van-button
                  >
                </template>
              </van-field>
              <div style="margin: 0.9rem 1rem 0rem">
                <van-button round block type="info" native-type="submit"
                  >登录</van-button
                >
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
        <div class="register">
          没有账号?<span @click="changeLoginRes">立即注册</span>
        </div>
      </div>
      <div class="secondBox2" v-if="showregister">
        <van-tabs>
          <van-tab title="注册账号">
            <van-form @submit="register">
              <van-field
                v-model="loginphone"
                name="account"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[
                  {
                    pattern: /^1[345678]\d{9}$/,
                  },
                ]"
              />
              <van-field
                v-model="captcha"
                name="captcha"
                label="验证码"
                placeholder="验证码"
                :rules="[{ required: true }]"
              >
                <template #button>
                  <van-button
                    :disabled="countTime < 60 && countTime >= 0"
                    @click="sendCaptcha(register)"
                    size="small"
                    type="primary"
                    >{{
                      countTime != 60 ? `${countTime}秒之后发送` : "发送验证码"
                    }}</van-button
                  >
                </template>
              </van-field>
              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true }]"
              />
              <div style="margin: 0.5rem 1rem 0rem">
                <van-button round block type="info" native-type="submit"
                  >登录</van-button
                >
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
        <div class="register">
          没有账号?<span @click="changeLoginRes">立即登录</span>
        </div>
      </div>
      <div class="secondBox3" v-if="showFindPassword">
        <van-tabs>
          <van-tab title="找回密码">
            <van-form @submit="resetPassword">
              <van-field
                v-model="loginphone"
                name="account"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[
                  {
                    pattern: /^1[345678]\d{9}$/,
                  },
                ]"
              />
              <van-field
                v-model="captcha"
                name="captcha"
                label="验证码"
                placeholder="验证码"
                :rules="[{ required: true }]"
              >
                <template #button>
                  <van-button
                    :disabled="countTime < 60 && countTime >= 0"
                    @click="sendCaptcha2()"
                    size="small"
                    type="primary"
                    >{{
                      countTime != 60 ? `${countTime}秒之后发送` : "发送验证码"
                    }}</van-button
                  >
                </template>
              </van-field>
              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true }]"
              />
              <div style="margin: 0.5rem 1rem 0rem">
                <van-button round block type="info" native-type="submit"
                  >登录</van-button
                >
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
        <div class="register">
          <span @click="findPassword">立即登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapMutations, mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      phonenum: "",
      password: "",
      loginphone: "",
      captcha: "",
      key: "",
      countTime: 60,
      intervalID: null,
      showregister: false,
      showFindPassword: false,
    };
  },
  created() {
    this.$axios.get("/api/verify_code").then((d) => {
      if (d.data.status == 200 && d.data.data.key) {
        this.key = d.data.data.key;
        // console.log(this.key)
      }
    });
  },
  props: {},
  methods: {
    findPassword() {
      // console.log("找密码");
      this.showFindPassword = !this.showFindPassword;
    },
    loginAccout(value) {
      this.$axios.post("api/login", value).then((d) => {
        if (d.data.status == 200) {
          this.login(d.data.data.token);
          this.getLoginUser(d.data.data.token);
          this.$toast("登录成功");
          setTimeout(() => {
            this.$router.push("/my");
          }, 500);
        } else {
          this.$toast(d.data.msg);
        }
      });
    },
    sendCaptcha(ty) {
      this.$axios
        .post("api/register/verify", {
          key: this.key,
          phone: this.loginphone,
          type: ty,
        })
        .then((d) => {
          this.$toast(d.data.msg);
          console.log("sendCaptcha==>", d);
          if (d.data.status == 200) {
            this.intervalID = setInterval(() => {
              if (this.countTime <= 0) {
                clearInterval(this.intervalID);
                this.countTime = 60;
                return;
              }
              this.countTime--;
            }, 1000);
          }
        });
    },
    sendCaptcha2() {
      this.$axios
        .post("api/register/verify", {
          key: this.key,
          phone: this.loginphone,
        })
        .then((d) => {
          this.$toast(d.data.msg);
          console.log("sendCaptcha==>", d);
          if (d.data.status == 200) {
            this.intervalID = setInterval(() => {
              if (this.countTime <= 0) {
                clearInterval(this.intervalID);
                this.countTime = 60;
                return;
              }
              this.countTime--;
            }, 1000);
          }
        });
    },
    loginByCaptcha(value) {
      this.$axios.post("/api/login/mobile", value).then((d) => {
        console.log("loginByCaptcha==>", d);
        if (d.data.status == 200) {
          this.login(d.data.data.token);
          this.getLoginUser(d.data.data.token);
          this.$toast("登录成功");
          setTimeout(() => {
            this.$router.push("/my");
          }, 500);
        } else {
          this.$toast(d.data.msg);
        }
      });
    },
    changeLoginRes() {
      this.showregister = !this.showregister;
      // console.log(this.showregister)
    },
    register(value) {
      this.$axios.post("api/register", value).then((d) => {
        if (d.data.status == 200) {
          Toast("注册成功请登录");
          this.showregister = false;
        } else {
          Toast(d.data.msg);
        }
        this.loginphone = "";
        this.captcha = "";
        this.password = "";
      });
    },
    resetPassword(value) {
      console.log(value);
      this.$axios.post("api/register/reset", value).then((d) => {
        if (d.data.status == 200) {
          Toast("修改成功请登录");
          this.showFindPassword = false;
        } else {
          Toast(d.data.msg);
        }
        this.loginphone = "";
        this.captcha = "";
        this.password = "";
      });
    },
    ...mapMutations(["login"]),
    ...mapActions(["getLoginUser"]),
  },
};
</script>

<style lang="less">
.login {
  background-image: linear-gradient(180deg, #eb5447 0, #ff8e3b);
  height: 100vh;
  width: 100vw;
  .first {
    height: 10rem;
    background-image: url("../assets/registerw.png");
    background-size: 100%;
    img {
      height: 5rem;
      width: 5rem;
      margin-left: calc(~"50% - 2.5rem");
      border: 2px solid white;
      border-radius: 50%;
      margin-top: 2.5rem;
    }
  }
  .second {
    position: relative;
    .secondBox,
    .secondBox2,
    .secondBox3 {
      width: 19rem;
      margin: 0 auto;
      position: relative;
      height: 19rem;
      background-color: white;
      border-radius: 0.8rem;
      overflow: hidden;
      .register {
        text-align: center;
        margin-top: 1.2rem;
        font-size: 0.9rem;
        color: #b3b3b3;
        letter-spacing: 1px;
        span {
          color: #e93323;
        }
      }
      .van-tabs__line {
        z-index: 0;
      }
    }

    &::after {
      content: "";
      background-image: url("../assets/registerbottom.png");
      height: 1rem;
      width: 19rem;
      position: absolute;
      bottom: -1rem;
      background-repeat: no-repeat;
      background-size: 100%;
      left: 50%;
      margin-left: -9.5rem;
    }
    .van-tabs--line {
      .van-tab {
        align-items: unset;
        line-height: 4.4rem;
        color: #a2a2a2;
      }
      .van-tab--active {
        color: black;
      }
      .van-tabs__wrap {
        height: 3.5rem;
        padding: 0rem 2rem;
      }
      .van-tab__text--ellipsis {
        font-size: 1.1rem;
        font-weight: bold;
      }
      .van-tabs__line {
        width: 4.5rem;
        height: 2px;
        transform: translateX(60px) translateX(-50%);
      }
      .van-tabs__content {
        margin-top: 1rem;
      }
      .van-field__label {
        width: 4rem;
      }
      .van-cell {
        font-size: 1rem;
        padding: 1rem 2rem;
      }
      .van-button--info {
        background: linear-gradient(90deg, #f35447 0, #ff8e3c);
        border: none;
        font-size: 1.05rem;
        font-weight: bold;
      }
      .van-button--small {
        height: 1.7rem;
        font-size: 0.8rem;
        background-color: #f35446;
        border: none;
        border-radius: 1rem;
      }
    }
    .secondBox2,
    .secondBox3 {
      position: absolute;
      top: 0px;
      left: 50%;
      margin-left: -9.5rem;
      .van-tabs__line {
        display: none;
      }
      .van-tabs__content {
        margin-top: 0rem;
      }
      .van-cell {
        padding: 0.7rem 2rem;
      }
      .register {
        margin-top: 0.7rem;
      }
    }
  }
}
</style>